

function Painter(ctx, img){
    var context = ctx;
    var center = {};
    var image = img;  
    var DEG2RAD = Math.PI/180.0;
    
    var init = function(){
        center[0] = context.canvas.width/2;
        center[1] = context.canvas.height/2;
    };
                  
    
    this.draw = function(){
        var posx = center[0]-image.width/2;
        var posy = center[1]-image.height/2;
        
        /* play around here: using state stacking and transformations */
        
        context.save();
        context.translate(posx, posy);
        context.scale(1.5, 1.5);
        context.translate(-posx, -posy);
        context.drawImage(image, posx , posy);
        context.restore();
        
        posx = center[0] + 140;
        posy = center[1] + 12;
        context.save();
        context.translate(posx, posy);
        context.rotate(45 * DEG2RAD);
        context.translate(-posx, -posy);

        context.font = "24px Arial";
        context.textAlign = "center";
        context.fillStyle = "rgb(231,123,7)";
        context.shadowOffsetX = 2;
        context.shadowOffsetY = 2;
        context.shadowBlur = 4;
        context.shadowColor = "rgba(32,32,32, 0.5)";
        context.fillText("Kicks Ass!", posx, posy);
        context.restore();
    };
    
    init();        
}



function main(){
    var context = document.getElementById('myCanvas').getContext('2d');
    var image = new Image();    
    image.onload = function(){
        var painter = new Painter(context, image);    
        painter.draw();            
    };
    image.src = "./img/dextra_logo.png";    
}

